<template>
    <div class="pagination">
      <a href="#" :class="Change=='a'?'active':'pagination'" @click="show(Home)">Home</a>
      <a href="#" :class="Change=='b'?'active':'pagination'" @click="show(Link)">Link </a>
    </div>
</template>
<script>
export default {
    data(){
        return{
           Change:"a",
           Home:"a",
           Link:"b"
        }
    },
    methods:{
      show(c){
         this.Change=c
         console.log(c)
      }
    }
}
</script>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  margin-right: 20px
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>